<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  account: '',  
  password: '', 
})

const rules = reactive<FormRules>({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  
  await formEl.validate((valid) => {
    if (valid) {
      // 发送登录请求到后端
      axios.post('/api/login', {
        account: ruleForm.account,
        password: ruleForm.password
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        console.log('登录成功:', response.data)
        // 登录成功后跳转到主页面
        router.push('/slider')
      })
      .catch(error => {
        console.error('登录失败:', error)
        // 显示错误提示
        ElMessage.error('登录失败，请检查账号密码')
      })
    } else {
      console.log('表单验证失败!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <div style="width: 100%; height: 900px; background-image: url('/src/img/gym.jpg'); 
              background-size: cover; display: flex; justify-content: center; align-items: center;">
              
    <el-form
      ref="ruleFormRef"
      style="width: 500px; padding: 30px; box-sizing: border-box; 
             background-color: rgba(255, 255, 255, 0.9); border-radius: 10px;"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >      
         <div style="color: #fa9c44; display: flex; justify-content: center; align-items: center; 
                  font-size: 32px; ">
        用户登录
      </div>
      <!-- 账户 -->
      <el-form-item label="账户" prop="account" style="margin-top: 30px;">
        <el-input v-model="ruleForm.account" placeholder="请输入账号"/>
      </el-form-item>
      
      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password />
      </el-form-item>
      
      <el-form-item style="padding-left: 30%; margin-top: 30px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="button-sub">
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)" class="button-reset">
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>

.button-sub {
  background-color: #ffa54f;
   width: 80px;
   border-color: #fff;
}
.button-sub:hover {
  color: #fff;
  background-color: #ffa600ae;
  border-color: #ffa54f;
}

.button-reset {
  color: #ffa54f;
  border-color: #fff;
  width: 80px;
}
.button-reset:hover {
  color: #fff;
  background-color: #ffa60045;
  border-color: #ffa54f;
}
</style>